<template>
	<div class="header">
		<navigator class="header-back"></navigator>
		<div class="header-title">Tabs</div>
	</div>
	<div class="header-row"></div>
	<div class="pd-5 bg-fff">tabs-border</div>
	<div class="tabs-border mgb-10">
		<div class="tabs-border-item tabs-border-active">全部</div>
		<div class="tabs-border-item">裙子</div>
		<div class="tabs-border-item">外套</div>
		<div class="tabs-border-item">牛仔裤</div>
	</div>
	
	<div class="tabs-border-group mgb-10">
		<div class="tabs-border">
			<div class="tabs-border-item tabs-border-active">全部</div>
			<div class="tabs-border-item">裙子</div>
			<div class="tabs-border-item">外套</div>
			<div class="tabs-border-item">牛仔裤</div>
		</div>
		<div class="tabs-border-box tabs-border-box-active">全部内容</div>
		<div class="tabs-border-box">裙子内容</div>
		<div class="tabs-border-box">外套内容</div>
		<div class="tabs-border-box">牛仔裤内容</div>
	</div>
	<div class="pd-5 bg-fff">tabs-toggle 竖排切换效果</div>
	<div class="tabs-toggle-group">
		<div class="tabs-toggle">
			<div class="tabs-toggle-hd">点击切换显示</div>
			<div class="tabs-toggle-box">
				这里是显示内容
			</div>
		</div>
		
		<div class="tabs-toggle">
			<div class="tabs-toggle-hd">点击切换显示</div>
			<div class="tabs-toggle-box">
				这里是显示内容
			</div>
		</div>
		
		<div class="tabs-toggle">
			<div class="tabs-toggle-hd">点击切换显示</div>
			<div class="tabs-toggle-box">
				这里是显示内容
			</div>
		</div>
	</div>
</template>